<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from 'echarts';
import {companyCountByDeptData} from "../data/data.js"

const BarECharts = ref(null)
const props = defineProps(['colors', 'count'])


const initEcharts = (() => {
  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option =  {
      color:['#90b3fc'],
      xAxis: {
        type: 'category',
        data: companyCountByDeptData.map(item => item.name)
      },
      yAxis: {
        type: 'value'
      },
      grid: {
        top:'10%',
        left: '3%',
        right: '4%',
        bottom: '20%',
        containLabel: true
      },
      series: [
        {
          data: companyCountByDeptData.map(item => item.value),
          type: 'bar',
          barMaxWidth: 30
        }
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})

onMounted(() => {
  initEcharts()
})

</script>

<style lang="less" scoped>
</style>
